<template>
  <div class="anchorDetails">
    <!-- 搜索 -->
    <div class="search">
      <el-input placeholder="请输入内容" v-model="anchorID">
        <template slot="prepend">主播ID</template>
      </el-input>
      <el-button @click="checkType">查询</el-button>
    </div>
    <!-- 主体内容 -->
    <el-radio-group
      style="margin-bottom: 10px"
      v-model="radioVal"
      @change="checkType"
    >
      <el-radio-button label="1">资料详情</el-radio-button>
      <el-radio-button label="2">业务详情</el-radio-button>
      <!-- <el-radio-button label="3">违规记录</el-radio-button> -->
    </el-radio-group>

    <!-- 对应页面 -->
    <DataDetails
      ref="dataDetails"
      :anchorID="anchorID"
      v-if="radioVal == '1'"
    ></DataDetails>
    <BusinessDetails
      :anchorID="anchorID"
      ref="business"
      v-if="radioVal == '2'"
    ></BusinessDetails>
    <!-- <ViolationRecord v-if="radioVal == '3'"></ViolationRecord> -->
  </div>
</template>

<script>
import DataDetails from "../../components/sonViews/DataDetails.vue";
import BusinessDetails from "../../components/sonViews/BusinessDetails.vue";
import ViolationRecord from "../../components/sonViews/ViolationRecord.vue";
export default {
  components: { DataDetails, BusinessDetails, ViolationRecord },
  data() {
    return {
      radioVal: "1", //选项卡
      anchorID: "", //主播ID
    };
  },
  created() {
    console.log(this.$route.query.id);
    if (this.$route.query.id != undefined) {
      this.anchorID = this.$route.query.id;
    }
  },
  methods: {
    checkType() {
      // if (this.anchorID == "") {
      //   return;
      // }
      // if (this.radioVal == "1") {
      // this.$refs.dataDetails.getData();
      // }
      // if (this.radioVal == "1") {
      // this.$refs.business.getDatas();
      // }
      switch (this.radioVal) {
        case "1":
          this.$refs.dataDetails.getData();
          break;
        // case "3":
        //   this.$refs.Business.searchBusiness();
        //   break;
        // case "4":
        //   this.$refs.AgencyDetails.getUserPull();
        //   break;
        // case "6":
        //   this.$refs.Appointment.search();
        //   break;
        // case "7":
        //   this.$refs.ReviewReference.search();
        //   break;
        // case "5":
        //   this.$refs.TransactionRecords.search();
        //   break;
        case "2":
          this.$refs.business.getList();
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.anchorDetails {
  margin: 30px;
  height: 100%;
  font-size: 14px;
  .search {
    display: flex;
    margin-bottom: 30px;
    /deep/.el-button {
      margin-left: 30px;
    }
    /deep/.el-input {
      width: 260px;
    }
  }
}
</style>